<template>
  <el-dialog
    v-model="isShow"
    :title="title"
    :width="width"
    :before-close="handleClose"
    :draggable="draggable"
    :show-close="showClose"
    :center="center"
  >
    <slot name="content" />
    <template #footer>
      <span
        v-if="showBtn"
        class="dialog-footer fc"
      >
        <el-button
          size="large"
          @click="handleCancel"
        >{{ cancelText ?? 'Cancel' }}</el-button>
        <el-button
          size="large"
          type="primary"
          @click="handleConfirm"
        >{{ confirmText ?? 'Confirm' }}</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ElMessageBox } from 'element-plus'
interface Props {
  isVisible: boolean;
  title?: string;
  width?: number;
  confirmText?: string;
  cancelText?: string;
  closeText?: string;
  draggable?: boolean;
  showClose?: boolean;
  showBtn?: boolean;
  center?: boolean;
}
const props = defineProps<Props>()
const isShow = computed(() => props.isVisible)
const emit = defineEmits(['update:isVisible', 'handleConfirm'])
const handleClose = (done: () => void) => {
  ElMessageBox.confirm(props.closeText || 'Are you sure to close this dialog?')
    .then(() => {
      emit('update:isVisible', false)
      done()
    })
    .catch(() => {
      // catch error
    })
}
const handleCancel = () => {
  emit('update:isVisible', false)
}
const handleConfirm = () => {
  emit('handleConfirm')
}
</script>
<style scoped>
.dialog-footer button:first-child {
  margin-right: 10px;
}
.el-button {
  width: 120px;
  font-size: 20px;
}
</style>
